<template>
  <div class="pdf-con clearfix" id="imageDomId">
    <div class="top-title clearfix">
      {{ pdfTitle }}
    </div>
    <el-row class="pdf-list">
      <el-col :span="item.col" class="row"
              v-for="(item, index) in formData"
              :key="index">
        <div class="tit">{{ item.title }}</div>
        <div class="con" :class="{'r-border':item.fenl24==12&& index % 2 === 0}">
          <p v-if="item.type == '5'||item.type == '9'||item.type == '6'" v-for="(list,ind) in item.value">
            <img class="fxl img-video" :src="list.url" v-if="item.type == '5'">
            <span v-if="item.type == '6'">{{list.url}}</span>
            <video class="fxl img-video" v-if="item.type == '9'" :src="list.url" controls/>
          </p>
          <p v-else-if="item.type == '10'">
            <circular-fields :table-static="tableStatic" :table-data="item.value"
                             :fields-data="item.header.slice(0,item.header.length-1)"></circular-fields>
          </p>
          <p v-else>{{ item.value }}</p>
        </div>
      </el-col>
      <el-col :span="24" class="con-detail">
        <p class="tit" style="width:100%">大 赛 声 明</p>
      </el-col>
      <el-col :span="24" class="con-detail">
        一、凡是投稿参赛者一律视为同意接受本次大赛的所有参赛规则，违反相关规则者，将追究法律责任。
      </el-col>
      <el-col :span="24" class="con-detail">
        二、所有参赛作品请参赛者自行保留原件，参赛作品将不予以退还。大赛组委会保留所有解释权。
      </el-col>
      <el-col :span="24" class="con-detail">
        <p class="tit">参赛者承诺书</p>
        <p>一、参赛者（以下简称“承诺人”）充分知晓<b>{{ pdfTitleSub }}</b>参赛规则并承诺遵守。
        </p><p>二、承诺人保证向大赛组委会提交的所有资料，包括但不限于参赛人员信息以及参赛作品等，所包含的全部内容均合法、完整、真实、有效。否则，大赛组委会有权取消本承诺人参赛资格。
        </p><p>三、承诺人（单位）同意组委会在本次大赛中无偿使用其姓名和肖像，收集、储存及在互联网和媒体上公开披露报名者填写的相关个人（单位）信息。
        </p><p>承诺人（单位）保证对提交的参赛作品系原创，且合法拥有其全部所有权以及与参赛作品相关的知识产权等，未侵犯任何他人的专利权、著作权、商业秘密、商标权及其他知识产权，本次参赛不存在任何法律瑕疵和障碍（包括但不限于未经共有权人同意私自参赛等），参赛作品不含任何诽谤、淫秽或非法材料。
        </p><p>四、若参评作品涉及侵权纠纷，由参评者即承诺人（单位）本人承担相应法律责任并取消其参评资格。
        </p><p>五、承诺人（单位）确认自将参赛作品送交大赛组委会之日起，即视为授予大赛组委会包括但不限制于发表权、展览权、表演权、放映权、广播权、信息网络传播权及知识产权优先售让、出版、宣传等权利。
        </p><p>六、因承诺人（单位）原因造成参赛作品存在知识产权或其他权利纠纷而影响本次大赛进行的，同意大赛组委会采取取消比赛资格等必要措施，并保证由本承诺人承担所有法律责任。承诺人同时放弃对大赛组委会提起诉讼和主张索赔的权利，给大赛主办单位造成损失的，承诺人（单位）承诺赔偿相关损失。
        </p><p>七、本承诺书自承诺人（单位）签字之日起生效。
      </p><p><b>承诺人（单位）确认：本承诺系本人（本单位）的真实意思表示，做出承诺前已经咨询相关法律人士，不存在任何欺诈、胁迫或乘人之危的情形。</b></p>
        <div class="clear h20"></div>
        <div class="fxr right-con">
          <p><span class="font">承诺人签名/承诺单位公章：</span></p>
          <p><span class="font">身份证号：</span></p>
          <p style="text-align: right"><span class="year">年</span><span class="month">月</span><span class="month">日</span></p>
        </div>
        <div class="clear h20"></div>
      </el-col>
    </el-row>
    <div class="space-line clearfix"></div>
  </div>
</template>

<script>
import axios from "axios";
import html2canvas from 'html2canvas'
import JsPDF from 'jspdf'
import circularFields from './circularFields.vue'

export default {
  name: "fomDataPdf",
  inject: ["imageUrl", "serviceUrl"],
  components: {
    circularFields
  },
  props: {
    pdfTitle: {
      type: String,
      default: () => {
        return '标题'
      }
    },
    pdfTitleSub:{
      type: String,
      default: () => {
        return '声明标题'
      }
    },
    // formData: {
    //   type: Array,
    //   default: () => {
    //     return [];
    //   },
    // },
  },
  data() {
    return {
      tableStatic:2,
      formData:[],
      title:'',
    };
  },

  computed: {},

  mounted() {
  },

  methods: {
    printOutPdf(name) {
      this.title = name
      console.log(name, 'resp.data.result.mingc');
      let dom = document.getElementById('imageDomId');
      let c = document.createElement("canvas")
      let opts = {
        logging: false, //日志开关，便于查看html2canvas的内部执行流程
        allowTaint: true,
        scale: 2,
        scrollX: 0,
        scrollY: 0,
        useCORS: true // 【重要】开启跨域配置
        // width: dom.clientWidth,
        // height: dom.clientHeight
      };
      c.width = dom.clientWidth * 2
      c.height = dom.clientHeight * 2
      c.getContext("2d").scale(2, 2);
      html2canvas(dom, opts).then(function (canvas) {
        console.log(canvas);
        let contentWidth = canvas.width
        let contentHeight = canvas.height
        let pageHeight = contentWidth / 592.28 * 841.89
        let leftHeight = contentHeight
        let imgWidth = 595.28
        let imgHeight = 592.28 / contentWidth * contentHeight
        let pageData = canvas.toDataURL('image/png');
        let PDF = new JsPDF('', 'pt', 'a4')
        if (leftHeight < pageHeight) {
          PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
          PDF.save(name + '.pdf')
        } else {
          let pdfWidth = (contentWidth + 10) / 2 * 0.75;
          let pdfHeight = (contentHeight + 100) / 2 * 0.75; // 500为底部留白
          let imgWidth = pdfWidth;
          let imgHeight = (contentHeight / 2 * 0.75); //内容图片这里不需要留白的距离
          let PDF = new JsPDF('', 'pt', [pdfWidth, pdfHeight]);
          PDF.addImage(pageData, 'jpeg', 0, 0, imgWidth, imgHeight);
          PDF.save(name + '.pdf')
          // while (leftHeight > 0) {
          //   PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
          //   leftHeight -= pageHeight
          //   position -= 841.89
          //   if (leftHeight > 0) {
          //     PDF.addPage()
          //   }
          // }
        }

      })
    },
  },
}

</script>

<style scoped lang="less">
.pdf-con {
  display: block !important;
  width: 1000px;
  padding: 0px 30px;
  position: fixed;
  margin-left:-3000px;

  .top-title {
    font-size: 20px;
    padding: 20px;
    text-align: center;
    width: calc(100% - 40px);
  }

  .pdf-list {
    border: 1px solid #000;
    border-bottom: 0px;

    .row {
      display: flex;
      align-items: stretch;

      .tit {
        width: 180px;
        padding: 10px;
        border-bottom: 1px solid #000;
        border-right: 1px solid #000;
        box-sizing: border-box;
        text-align: center;

      }

      .con {
        width: calc(100% - 180px);
        padding: 10px;
        border-bottom: 1px solid #000;
        box-sizing: border-box;

        &.r-border {
          border-right: 1px solid #000;
        }
      }

    }
  }

  .space-line {
    height: 30px;
    display: block;
  }

  .img-video{
    height:120px;
  }
}
.con-text{
  text-align: center;
}
.con-detail{
  text-indent: 2em;
  line-height:30px;
  padding:0px 20px;
  border-bottom:1px solid #000;
  p{
    &.tit{
      text-align: center;
      font-weight: bold;
    }
    text-indent: 2em;
  }
}
.right-con{
  .font{
    display: inline-block;
    width:230px;
    text-align: right;
  }
  width:400px;
  lone-height:30px;
  .year{
    display: inline-block;
    width:80px;
  }
  .month{
    display: inline-block;
    width:60px;
  }
}
</style>
